<template>
    <div class="task-bar">
        <div class="task-bar-container">
            <!-- 开始菜单按钮 -->
            <div class="start-btn">
                <i class="start-btn-i iconfont icon-windows"></i>
            </div>

            <!-- 任务栏 -->
            <div id="tasks" class="tasks" @mouseenter="showScrollBtn" @mouseleave="hideScrollBtn">
                <div v-show="isLeftScrollBtnShow" class="left-scroll-btn" @click="leftScroll(120 * 3)">
                    <i class="iconfont icon-xiangzuo"></i>
                </div>
                <div id="tasks-scroll-container" class="tasks-scroll-container" :style="{ left: tasksContainerPositionLeft + 'px' }">
                    <task v-for="window in windowArray" :key="window.id" :task="window" class="task"></task>
                </div>
                <div v-show="isRightScrollBtnShow" class="right-scroll-btn" @click="rightScroll(120 * 3)">
                    <i class="iconfont icon-xiangzuo"></i>
                </div>
            </div>
            <!-- 任务栏时钟 -->
            <clock class="clock"></clock>
        </div>
        <!-- 开始菜单 -->
        <start-menu class="start-menu" :class="{ 'start-menu-slide': isStartMenuShow }"></start-menu>
    </div>
</template>

<script setup lang="ts">
import Task from '@/components/Task.vue';
import StartMenu from '@/components/StartMenu.vue';
import Clock from '@/components/Clock.vue';
import { useWindowStore } from '@/store/window';
import { reactive, toRefs } from 'vue';

// 创建store对象
const windowStore = useWindowStore();

const data = reactive({
    // 窗口数组
    windowArray: windowStore.windowArray,
    // 是否显示开始菜单
    isStartMenuShow: false,
    // 任务栏容器定位
    tasksContainerPositionLeft: 0,
    // 任务栏容器滚动按钮是否显示
    isLeftScrollBtnShow: false,
    isRightScrollBtnShow: false,
});
const { windowArray, isStartMenuShow, tasksContainerPositionLeft, isLeftScrollBtnShow, isRightScrollBtnShow } = toRefs(data);

// 触发显示任务栏容器滚动按钮
const showScrollBtn = function () {
    const tasks = document.getElementById('tasks');
    const tasksContainer = document.getElementById('tasks-scroll-container');
    if (tasks && tasksContainer && tasks.offsetWidth - tasksContainer.offsetWidth < 0) {
        if (data.tasksContainerPositionLeft !== 0) {
            data.isLeftScrollBtnShow = true;
        }
        if (data.tasksContainerPositionLeft !== tasks.offsetWidth - tasksContainer.offsetWidth) {
            data.isRightScrollBtnShow = true;
        }
    }
};

// 触发隐藏任务栏容器滚动按钮
const hideScrollBtn = function () {
    data.isLeftScrollBtnShow = false;
    data.isRightScrollBtnShow = false;
};

// 左滚动
const leftScroll = function (offset: number) {
    const tasks = document.getElementById('tasks');
    const tasksContainer = document.getElementById('tasks-scroll-container');
    if (tasks && tasksContainer && tasks.offsetWidth - tasksContainer.offsetWidth < 0) {
        if (data.tasksContainerPositionLeft + offset > 0) {
            data.tasksContainerPositionLeft = 0;
        } else {
            data.tasksContainerPositionLeft += offset;
        }
    }
    hideScrollBtn();
    showScrollBtn();
};

// 右滚动
const rightScroll = function (offset: number) {
    const tasks = document.getElementById('tasks');
    const tasksContainer = document.getElementById('tasks-scroll-container');
    if (tasks && tasksContainer && tasks.offsetWidth - tasksContainer.offsetWidth < 0) {
        if (data.tasksContainerPositionLeft - offset < tasks.offsetWidth - tasksContainer.offsetWidth) {
            data.tasksContainerPositionLeft = tasks.offsetWidth - tasksContainer.offsetWidth;
        } else {
            data.tasksContainerPositionLeft -= offset;
        }
    }
    hideScrollBtn();
    showScrollBtn();
};

// 鼠标点击事件，显示和隐藏开始菜单
parent['document'].addEventListener('click', (e) => {
    if (e.target && (e.target as HTMLElement).className.startsWith('start-btn')) {
        // 点击开始按钮切换显示状态
        data.isStartMenuShow = !data.isStartMenuShow;
    } else {
        // 点击其他部分隐藏
        data.isStartMenuShow = false;
    }
});
</script>

<style scoped lang="less">
.task-bar {
    height: 40px;
    width: 100vw;

    .task-bar-container {
        height: 100%;
        width: 100%;
        background-color: @dps-color-gray-90; // 任务栏透明
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        z-index: 66666666;

        .start-btn {
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 100ms;

            i {
                font-size: 20px;
                color: @dps-color-white;
            }
        }

        .start-btn:hover {
            background-color: @dps-color-light-gray-15;
        }

        .tasks {
            height: 40px;
            width: calc(100vw - 15px - 20px - 15px - 60px);
            overflow: hidden;
            margin-left: 15px;
            position: relative;

            .tasks-scroll-container {
                height: 40px;
                position: absolute;
                top: 0;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                transition: all 100ms;
            }

            .left-scroll-btn {
                height: 40px;
                width: 15px;
                position: absolute;
                left: 0;
                top: 0;
                background-color: @dps-color-gray;
                z-index: 88888888;
                display: flex;
                align-items: center;
                justify-content: center;

                i {
                    font-size: 15px;
                    color: @dps-color-white;
                }
            }

            .right-scroll-btn {
                height: 40px;
                width: 15px;
                position: absolute;
                right: 0;
                top: 0;
                background-color: @dps-color-gray;
                z-index: 88888888;
                display: flex;
                align-items: center;
                justify-content: center;

                i {
                    font-size: 15px;
                    transform: rotate(180deg);
                    color: @dps-color-white;
                }
            }
        }
    }

    .start-menu {
        position: absolute;
        bottom: 40px;
        left: 0;
        transition: all 100ms;
        transform: scaleY(0);
        transform-origin: 0 100%;
    }

    .start-menu-slide {
        transform: scaleY(1);
    }
}
</style>
